<template>
    <pui-drawer show :title="mainRef.passtitle" position="left">
        <div class="resource-drawer-content">
            <pui-tabs :tabList="mainRef.tabList2" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
            <WaveTab v-show="mainRef.nowTabIndex === '0'" ref="WaveTabRef" @showAddSource="showAddSource" @showSetting="showSetting($event, 'wave')" />
            <LightTab v-show="mainRef.nowTabIndex === '1'" ref="LightTabRef" @showAddSource="showAddSource" @showSetting="showSetting($event, 'light')" />
            <DetectorTab v-show="mainRef.nowTabIndex ==='2'" ref="DetectorTabRef" @showAddSource="showAddSource" @showSetting="showSetting($event, 'detector')" />
        </div>
    </pui-drawer>
    <AddCompoDialog ref="AddCompoDialogRef" @on-submit="onSubmit($event)" />
    <LightSetting ref="LightSettingRef"/>
    <WaveSetting ref="WaveSettingRef"/>
    <DetectorSetting ref="DetectorSettingRef"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'resource-content',
})
</script>
<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import mainData from './index'
import DetectorTab from './DetectorTab.vue'
import LightTab from './LightTab.vue'
import WaveTab from './WaveTab.vue'
import AddCompoDialog from '../AddCompoDialog.vue'
import LightSetting from './LightSetting.vue'
import WaveSetting from './WaveSetting.vue'
import DetectorSetting from './DetectorSetting.vue'
import { deviceManager } from '@/services/phot_client/device'
const { proxy } = getCurrentInstance() as any
const mainRef = reactive({
    passtitle:'波导列表',
    nowTabIndex: '0',
    tabList2: [
        {
            name: '波导列表',
            id: '0'
        },
        {
            name: '光源列表',
            id: '1'
        },
        {
            name: '监视器列表',
            id: '2'
        },
    ]as any[],
})
const tabClickHandle = (e:any) => {
    mainRef.nowTabIndex = e.id
    mainRef.passtitle = e.name
}
const onSubmit = (e: any) => {
    if (e.type === 'light') {
        proxy.$refs.LightTabRef.addSourceItem(e.name)
    }
    if (e.type === 'wave') {
        proxy.$refs.WaveTabRef.addSourceItem(e.name)
    }
    if (e.type === 'detector') {
        proxy.$refs.DetectorTabRef.addSourceItem(e.name)
    }
}
const init = () => {
    proxy.$refs.LightTabRef.init()
    proxy.$refs.WaveTabRef.init()
    proxy.$refs.DetectorTabRef.init()
}
const addSource = (type: any, source: any) => {
    console.log(type, source)
    if (type === 'light') {
        proxy.$refs.LightTabRef.addSource(source)
    }
    if (type === 'wave') {
        proxy.$refs.WaveTabRef.addSource(source)
    }
    if (type === 'detector') {
        proxy.$refs.DetectorTabRef.addSource(source)
    }
}
const showAddSource = (type: any) => {
    proxy.$refs.AddCompoDialogRef.init(type)
}
const showSetting = (e: any, type: any) => {
    if (type === 'light') {
        proxy.$refs.LightSettingRef.init(e)
    }
    if (type === 'wave') {
        proxy.$refs.WaveSettingRef.init(e)
    }
    if (type === 'detector') {
        proxy.$refs.DetectorSettingRef.init(e)
    }
}
defineExpose({
    init,
    addSource
})
</script>